<template>
  <div class="left-stick" v-cloak>
    <div class="wrapper">
      <div class="stickContorll" v-show="showPagination">
        <div class="createBtn" @click="handleCreatStick">发帖</div>
        <v-pagination 
          :total="total" 
          :current-page='current' 
          @pagechange="pagechange"
        ></v-pagination>
      </div>
      <div class="container">
        <div class="controller">
          <div class="sortControll" v-show="isDetail">
            <span class="actived">全部</span>
            <span>精华</span>
            <span>会员</span>
          </div>
          <div class="sortControll" v-show="!isDetail">
            <span class="actived">本站新帖</span>
            <span>我的板块</span>
          </div>
          <div class="timeControll">
            <span>最新发帖</span>
            <span class="actived">最后回复</span>
          </div>
        </div>
        <div class="sticks">
          <div class="area" v-for="item in currentPages" :key="item.id">
            <div class="content">
              <div class="user-pic">
                <img :src="item.userPic">
              </div>
              <div class="stick-desc">
                <h4 class="title">
                  <i class="iconfont normal" title="普通贴" v-show="item.level = 'normal'">&#xe60a;</i>
                  <i class="iconfont top" title="置顶" v-show="item.level=='top'">&#xe672;</i>
                  <i class="iconfont elite" title="精华" v-show="item.level=='elite'">&#xe6b3;</i>
                  <span class="detail-title">[{{item.platform}}]  {{item.title}}</span>
                  <i class="iconfont appendix" title="附件" v-show="item.hasAppendix">&#xe607;</i>
                  <i class="iconfont picture" title="图片贴" v-show="item.hasPicture">&#xe6ee;</i>
                </h4>
                <p class="user">
                  <span>楼主:</span>
                  <span>{{item.user}}</span>
                  &nbsp;
                  <span>{{item.setTime}}</span>
                  &nbsp;&nbsp;
                  <span>最后回复:</span>
                  <span>{{item.lastRequestUser}}</span>
                  &nbsp;
                  <span>{{item.lastRequestTime}}</span>
                </p>
              </div>
            </div>
            <div class="popularity">
              <div class="count">
                <span>浏览</span>
                <span>{{item.scanCount}}</span>
              </div>
              <div class="count">
                <span>回复</span>
                <span>{{item.request}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="stickContorll bottom" v-show="showPagination">
        <div class="createBtn" @click="handleCreatStick">发帖</div>
        <v-pagination 
          :total="total" 
          :current-page='current' 
          @pagechange="pagechange"
        ></v-pagination>
      </div>
      <div class="stickContorll bottom father" v-show="!showPagination">
        <div></div>
        <v-pagination 
          :total="total" 
          :current-page='current' 
          @pagechange="pagechange"
        ></v-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import pagination from 'common/pagenation/pagenation';
import axios from 'axios';
export default {
  name: 'LeftStick',
  components: {
    'v-pagination': pagination
  },
  data () {
    return {
      list: [],
      currentPages: [],
      total: 0,     // 记录总条数
      display: 10,   // 每页显示条数
      current: 1,   // 当前的页数
      pages: [],
      showPagination: false,
      isDetail: false
    }
  },
  methods: {
    getStickInfo () {
      const _this = this;
      const _id = _this.$route.query.data;
      if (_id.substr(4) !== '0') {
        _this.showPagination = true;
        $('.left-stick').css({
          'margin-top': '-1.2rem'
        })
      }
      axios.get('/api/source/stick.json').then(function(response){
        if(response.data.ret && response.data.data){
          _this.list = response.data.data;
          _this.total = _this.list.length;
          _this.list.forEach( (item, index) =>{
            const page = Math.floor(index / _this.display);
            if(!_this.pages[page]){
              _this.pages[page] = [];
            }
            _this.pages[page].push(item);
          })
          _this.pagechange(1);
        }
      })
    },
    pagechange (current) {
      this.currentPages = this.pages[current-1];
    },
    handleCreatStick () {
      
    }
  },
  mounted () {
   this.getStickInfo();
   const routes = this.$route.name;
   if (routes == 'Detail') {
    this.isDetail = true
   }else {
    this.isDetail = false
   }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~assets/css/mixins.styl';
  [v-cloak] 
    display: none !important
  .left-stick
    margin-top: -.3rem
    font-size: .24rem
    .wrapper
      margin: 0 .4rem .8rem .4rem
      .stickContorll.bottom 
        margin: .3rem 0
      .stickContorll
        display: flex
        flex-wrap: no-wrap
        justify-content: space-between
        margin-bottom: .4rem
        .createBtn
          height: .6rem
          line-height: .6rem
          text-align: center
          width: 1.4rem
          color: #fff
          font-size: .27rem
          font-weight: bold
          background: linear-gradient(to bottom, #50a1d3, #3675bf)
          border: .01rem solid #0c497c
          border-radius: .08rem
        .createBtn:hover
          background: linear-gradient(to bottom, #4196c7, #2b64ab)
          cursor: pointer
      .container
        color: $font-blue
        .controller
          display: flex
          flex-direction: row
          flex-wrap: no-wrap
          justify-content: space-between
          border-bottom: .02rem solid #e3e3e3
          .sortControll
            span
              padding: .14rem .2rem 
              border-radius: .08rem
              cursor: pointer
            span.actived
              color: #fff
              background: #4791d0
              font-weight: bold
          .timeControll
            margin-bottom: .4rem
            span
              padding: .12rem .18rem
              border: .01rem solid #ccc
              color: $font-welcome
              background: linear-gradient(to bottom,#fefefe,#f1f1f1)
              cursor: pointer
            span.actived
              color: $font-light
              background: linear-gradient(to bottom,#e0e0e0,#f4f4f4)
            span:nth-child(1)
              border-radius: .08rem 0 0 .08rem 
            span:nth-child(2)
              border-radius: 0 .08rem .08rem 0
              margin-left: -.01rem
        .sticks
          width: 100%
          margin-top: 0
          .area 
            height: 1.36rem
            border-bottom: .02rem dashed #dcdcdc
            display: flex 
            flex-wrap: no-wrap
            justify-content: space-between
            .content
              width: 80%
              display: flex
              flex-wrap: no-wrap
              align-items: center
              .user-pic
                width: .94rem
                height: .94rem
                img 
                  width: 100%
                  height: 100% 
              .stick-desc
                width: 8.8rem
                display: flex 
                overflow: hidden
                flex-direction: column
                justify-content: space-between
                flex-wrap: no-wrap
                .title,.user
                  height: .46rem
                  line-height: .46rem
                  margin-left: .4rem   
                .title
                  display: flex 
                  i 
                    display: block
                    margin-right: .04rem
                    line-height: .54rem
                  .normal
                    color: #bbb
                  .appendix
                    color: #828282
                  .top 
                    color: #80c455
                  .elite
                    color: #fc7a3a
                    font-size: .5rem
                  .detail-title
                    display: block
                    max-width: 5rem !important
                    overflow: hidden
                    text-overflow: ellipsis
                    white-space: nowrap
                .user
                  color: $font-light
            .popularity
              width: 20%
              display: flex
              text-align: center
              .count 
                width: 1.1rem
                background: $bgcolor-all
                color: $font-light
                margin-left: .24rem
                border-radius: .05rem
                display: flex
                flex-direction: column
                justify-content: center
                margin: .23rem 0 .23rem .4rem
                span 
                  flex-shrink: 1
                  height: .46rem
                  line-height: .46rem
                span:nth-child(even)
                  font-weight: bold
                  margin-top: -.04rem
                span:nth-child(odd)
                  margin-bottom: -.04rem
</style>
